import { Card } from 'antd';
import { useState, useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import { getOption } from './echartsOptions';
import wxyPng from '../images/危险源.png';
import SouyeApi from '../../../../../../utils/apis/SouyeApi';
export default function Fmkswxy(props) {
    const chartRef = useRef();

    const [data, setData] = useState([])
    const [cztzl, setCztzl] = useState("非煤矿山事故危险源")
    useEffect(() => {
        SouyeApi.cztzl_find(cztzl).then(resp => {
            // setDatas(resp.data.map(e => {
            //     const a = {}
            //     if (e.cztxl) {
            //         a.name = e.cztxl
            //         a.value = e.count
            //         a.cztxl = e.cztxl
            //     }

            //     return a
            // }))
        })
    }, [cztzl])


    const [datas, setDatas] = useState([
        {
        name: '地下矿山',
        cztxl: '地下矿山',
        value: 0
    }, {
        name: '露天矿',
        cztxl: '露天矿',
        value: 10
    }, {
        name: '尾矿山',
        cztxl: '尾矿山',
        value: 0
    }
])

    useEffect(() => {
        const chart = echarts.init(chartRef.current);
        const option = getOption(datas);
        chart.setOption(option)
    }, [datas])

    return <>
        <Card title={<div className='layout-h center'>
            <img src={wxyPng} alt='' style={{
                width: 22,
                marginRight: 8
            }} />
            <div>非煤矿山危险源</div>
        </div>} bordered={false} bodyStyle={{
            height: 300
        }}>
            <div className='wh100' ref={chartRef}></div>
        </Card>
    </>;
}